<template>

	<el-container>

		<el-aside style="border-right: 0px solid var(--el-border-color-light);">

		</el-aside>

		<el-container>
			<el-main>

				<div class="bubble-list-wrapper">

					<p v-loading="isLoading" v-if="isLoading">

					</p>

					<BubbleList ref="bubbleListRef" :list="bubbleItems" @scroll="checkTrigger">
						<!-- 自定义头像 -->
						<template #avatar="{ item }">
							<div class="avatar-wrapper">
								<img :src="item.role === 'ai' ? avartAi : avatar" alt="avatar">
							</div>
						</template>

						<!-- 自定义头部 -->
						<template #header="{ item }">
							<div class="header-wrapper">
								<div class="header-name">
									{{ item.role === 'ai' ? '柏乐AI助手 🍧' : '我' }}
								</div>
							</div>
						</template>

						<!-- 自定义气泡内容 -->
						<template #content="{ item }">
							<div class="content-wrapper">
								<div class="content-text">
									<template v-if="item.content">
										<template v-if="item.role==='user'">
											{{item.content}}
										</template>
										<Typewriter v-else :content="item.content" :is-markdown="true" is-fog typing />
									</template>
									<template v-else>
										{{ item.role === 'ai' ? `${switchValue ? `#ai-${item.key}：` : ''} 💖 感谢使用 Element Plus X ! 你的支持，是我们开源的最强动力 ~` : `${switchValue ? `#user-${item.key}：` : ''}哈哈哈，让我试试` }}
									</template>
								</div>
							</div>
						</template>

						<!-- 自定义底部 -->
						<template #footer="{ item }">
							<div class="footer-wrapper">
								<div class="footer-container">
									<el-button icon="el-icon-refresh" type="info" size="small" circle>
									</el-button>
									<el-button icon="el-icon-search" type="success" size="small" circle>
									</el-button>
									<el-button icon="el-icon-star-filled" type="warning" size="small" circle>
									</el-button>
									<el-button icon="el-icon-document-copy"
										:style="{ backgroundColor: '#626aef', color: 'white' }" size="small" circle>
									</el-button>
								</div>
								<div class="footer-time">
									{{ item.role === 'ai' ? '下午 2:32' : '下午 2:33' }}
								</div>
							</div>
						</template>

						<!-- 自定义 loading -->
						<template #loading="{ item }">
							<div class="loading-container">
								<span>#{{ item.role }}-{{ item.key }}：</span>
								<span>我</span>
								<span>是</span>
								<span>自</span>
								<span>定</span>
								<span>义</span>
								<span>加</span>
								<span>载</span>
								<span>内</span>
								<span>容</span>
								<span>哦</span>
								<span>~</span>
							</div>
						</template>
					</BubbleList>
					<Sender v-model="content" ref="senderRef" style="background-color: #f1f2f4;" @submit="submit" />
				</div>
			</el-main>
		</el-container>

		<el-aside style="border-left: 0px solid var(--el-border-color-light);">

		</el-aside>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				content: "",
				bubbleItems: [],
				avatar: 'https://avatars.githubusercontent.com/u/76239030?v=4',
				avartAi: '/img/logo-r.png',
				switchValue: false,
				loading: false,
				isLoading: false,
			}
		},
		created() {
			this.bubbleItems = this.generateFakeItems(5);
		},
		methods: {
			checkTrigger(e) {
				if (this.isLoading) return;
				const container = this.$refs.bubbleListRef;
				const loading = container.$el;
				this.isLoading = container.$el.scrollTop === 0 ? true : false;
				if (this.isLoading) {
					container.$el.style.scrollBehavior = 'auto'
					this.bubbleItems.unshift({
						key: this.bubbleItems.length + 1,
						role: 'user',
						placement: 'end',
						content: "测试成功1",
						noStyle: true,
					});
					this.bubbleItems.unshift({
						key: this.bubbleItems.length + 1,
						role: 'user',
						placement: 'end',
						content: "测试成功2",
						noStyle: true,
					});
					this.$nextTick(() => {
						setTimeout(() => {
							this.$refs.bubbleListRef.scrollToBubble(1);
							container.$el.style.scrollBehavior = ''
							this.isLoading = false;
						}, 1000)
					})
				}
			},
			submit(e) {
				this.bubbleItems.push({
					key: this.bubbleItems.length + 1,
					role: 'user',
					placement: 'end',
					content: e,
					noStyle: true,
				});
				this.$refs.senderRef.clear();
			},
			generateFakeItems(count) {
				const messages = [];
				for (let i = 0; i < count; i++) {
					const role = i % 2 === 0 ? 'ai' : 'user';
					const placement = role === 'ai' ? 'start' : 'end';
					const key = i + 1;
					messages.push({
						key,
						role,
						placement,
						noStyle: true, // 如果你不想用默认的气泡样式
					});
				}
				return messages;
			},
			// 设置某个 item 的 loading
			setLoading(loading) {
				this.bubbleItems[this.bubbleItems.length - 1].loading = loading;
				this.bubbleItems[this.bubbleItems.length - 2].loading = loading;
			}
		}
	}
</script>

<style scoped>
	/**/
	.avatar-wrapper {
		width: 40px;
		height: 40px;
	}

	.avatar-wrapper img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.header-wrapper .header-name {
		font-size: 14px;
		color: #979797;
	}

	.content-wrapper .content-text {
		font-size: 14px;
		color: #333;
		padding: 12px;
		/*background: linear-gradient(to right, #fdfcfb 0%, #ffd1ab 100%);*/
		background-color: rgb(239, 246, 255);
		border-radius: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.footer-wrapper {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.footer-wrapper .footer-time {
		font-size: 12px;
		margin-top: 3px;
	}

	.footer-container .el-button+.el-button {
		margin-left: 8px;
	}

	:deep(.el-bubble-list::-webkit-scrollbar) {
		background-color: transparent;
	}

	:deep(.el-bubble-list::-webkit-scrollbar-thumb) {
		background-color: transparent;
	}

	:deep(.el-bubble-list::-webkit-scrollbar-track) {
		background-color: transparent;
	}

	/*悬浮*/
	:deep(.el-bubble-list:hover::-webkit-scrollbar) {
		background-color: #FFF !important;
	}

	:deep(.el-bubble-list:hover::-webkit-scrollbar-thumb) {
		background-color: #b0b0b0 !important;
	}

	:deep(.el-bubble-list::-webkit-scrollbar-thumb:hover) {
		background-color: #b0b0b0 !important;
	}




	.bubble-list-wrapper {
		display: flex;
		flex-direction: column;
		gap: 12px;
		background-color: #fff;
		padding: 30px;
		border-radius: 15px;
	}

	/*
	.loading-container {
		font-size: 14px;
		color: #333;
		padding: 12px;
		background: linear-gradient(to right, #fdfcfb 0%, #ffd1ab 100%);
		border-radius: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.loading-container span {
		display: inline-block;
		margin-left: 8px;
	}


	@keyframes bounce {
		0%,
		100% {
			transform: translateY(5px);
		}

		50% {
			transform: translateY(-5px);
		}
	}

	.loading-container span:nth-child(4n) {
		animation: bounce 1.2s ease infinite;
	}

	.loading-container span:nth-child(4n+1) {
		animation: bounce 1.2s ease infinite;
		animation-delay: .3s;
	}

	.loading-container span:nth-child(4n+2) {
		animation: bounce 1.2s ease infinite;
		animation-delay: .6s;
	}

	.loading-container span:nth-child(4n+3) {
		animation: bounce 1.2s ease infinite;
		animation-delay: .9s;
	}*/
</style>
